@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body {
background: rgb(56,149,131);
background: linear-gradient(0deg, rgba(56,149,131,1) 0%, rgba(29,68,46,1) 100%);
color: #F6F6F2;
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: normal;
}
a {
color: #05396b;
background-color: white;
}
pre {
background: #C2EDCE;
border-color: #388087;
}
I have met the requirements related to working with GitHub in regards to the README.md file this is because:
And here is the link I recorded that goes to my stats220 GitHub repo: stats220.repo
I have also met the requirements related to working with GitHub in regards to using GitHub pages:
And here is the link to my GitHub Page: GitHub Page
Even though the three images that I used in both my static and animated meme (HappyOpp.jpeg, SadOpp.png, glasses.png) was through using their respective links in my code. I downloaded the original photos and added them to my Project1 folder to satisfy the requirement “all files and images used for this project should be visible” so I did this as I wanted to be safe. This folder also has the files for the GitHub page that I created.
This was the meme that I took inspiration from. The key components and features of the image that I recreated and/or changed were:
The reason I made these changes is because I wanted to keep the theme of the meme similar in terms of keeping it school/procrastination/assignment related while also having correlation to the images. Therefore I changed the text so it was more suited and I changed the two images but chose ones that I think have similar resemblance (one being positive and one being negative, matching Drake agreeing and disagreeing). I changed the flipped the colour of the text and the colour of the text background because I felt like it poppoed more especially with the images I chose. Then I changed the font of the text to arial which is similar to the original but I just liked the simplicity of it. The format of the meme is the same as the inspiration meme (2 images on the left, 2 text boxes on the left) but it has just been recreated with the different features listed above. Overall those were the key components and features of the meme that were recreated/changed which made the meme unique but it still relates to the inspiration meme.
In regards to creating the animated meme. I decided to add cool glasses that moved from above the happy photo to on top of the happy photo so it looked like he was wearing them. In total my animation is 10 frames long because the first five are gradually moving to the target (directly above habby photo eyes). Then the last five are going from the target point back to the starting position using the rev() function. I decided to do this so when the animated meme restarts it’s very smooth and doesn’t just cut from the desired positon back to the start, it instead doesn’t cut and has a very clean loop. The reason why I decided to add the glasses in general was because I thought it really suited my meme. I feel like the cool glasses add to the happy mood in the lower part of the meme and emphasise the being chill about starting the project so close to when it’s due. Because the pictures I chose to use for the meme weren’t as vibrant as my inspiration meme I wanted to add something that would look cool animated but also add something attention grabbing - So I feel as if this creates even more resemblance. Also, overall I felt as if the animated glasses add more life to the meme and my animated meme is directly linked to my static meme.
library(magick)
# static meme code
# top left frame image
sad_oppenheimer <- image_read("https://www.comingsoon.net/wp-content/uploads/sites/3/2023/05/oppenheimer-cillian.png") %>%
image_crop("593x500.34+300") %>%
image_noise()
# top right frame text
top_text <- image_blank(width = 500,
height = 500,
color = "black") %>%
image_annotate(text = "Starting project 1 a\nweek before it's due",
color = "white",
size = 50,
font = "arial",
gravity = "center")
# bottom left frame image
happy_oppenheimer <- image_read("https://i.kym-cdn.com/entries/icons/original/000/045/846/oppsmile.jpg") %>%
image_crop("593x500.34+300") %>%
image_noise()
# bottom right frame text
bottom_text <- image_blank(width = 500,
height = 500,
color = "black") %>%
image_annotate(text = "Starting 2 hours\nbefore the due date",
color = "white",
size = 50,
font = "arial",
gravity = "center")
# creating each row of the meme
# creating the top row
sad_vector <- c(sad_oppenheimer, top_text)
top_row <- image_append(sad_vector)
# creating the bottom row
happy_vector <- c(happy_oppenheimer, bottom_text)
bottom_row <- image_append(happy_vector)
# combining vectors and putting it all together
meme <- c(top_row, bottom_row) %>%
image_append(stack = TRUE) %>%
image_scale(800)
# callimg my meme to print
meme
# code to save the meme as an image file
image_write(meme, "my_meme.png")
animated meme code
# glasses image
glasses_image <- image_read("https://png.pngtree.com/png-clipart/20220927/ourmid/pngtree-thug-life-pixel-mlg-shades-glasses-vector-png-image_6219265.png") %>%
image_scale(275)
# changing the glasses size and orientation before putting on the meme
glasses_processed <- image_scale(image_rotate(image_background(glasses_image, "none"), 5), "x275")
# composite the glasses image onto the meme at a different offset for each frame
frame1 <- image_composite(image_scale(meme), glasses_processed, offset = "+0-210")
frame2 <- image_composite(image_scale(meme), glasses_processed, offset = "+20-260")
frame3 <- image_composite(image_scale(meme), glasses_processed, offset = "+40-310")
frame4 <- image_composite(image_scale(meme), glasses_processed, offset = "+60-360")
frame5 <- image_composite(image_scale(meme), glasses_processed, offset = "+80-410")
# creating a vector for the animated gif
frames <- c(frame1, frame2, frame3, frame4, frame5)
# creating a vector for the frames and the reverse frames
all_frames <- c(frames, rev(frames))
# animating the vector
animation <- all_frames %>%
image_animate(fps = 5)
# calling the animated_gif to print
animation
# code to save the animated gif as a gif file
image_write(animation, "my_animation.gif")
My project demonstrates creativity, this is because:
I have used additional functions from the {magick} package that were not covered in the lectures/labs.
One of the additional functions from the {magick} package I used in my project was the image_compsite() function. I was able to find out about this in some of the Magick Documentation. I used this for animating my meme as it allowed me to put the glasses on top of my meme and then move the offset after each frame so I could move the position of the glasses. Without this, it would’ve been very hard to animate my meme in the way I wanted to.
Another one of the additional functions from the {magick} package that I used in my project was the rev() function. Similar to the image_composite() function I was able to found this on the Magick Documentation. I used this so I could reverse the five frames within my gif to get the glasses back to the origin point, this basically just made my code more efficient/clean.
One more additional function from the {magick} package that I used in my project was the image_noise() function which I once again found on the Magick Documentation. This allowed me to add a cool looking image effect to my meme.
I have used more CSS then what was required to change the appearance of my HTML.
Because I have done CSS before in High School I know how to create gradient backgrounds, this allowed me to be more creative with my HTML document and overall improve how my HTML looked.
Another extra CSS function that I used was border-color. I used this to outline the code boxes so they could stand out from the background which makes it look better but also make it more visible.
One important idea I learned from Module 1 (Creating HTML by combining modern technologies) was:
Some things related to data technologies that I am more curious about exploring further are: